<template>
    <view class="custom-detail-list">
        <item-card v-for="item in customDetailList" @click.native="goProduct(item)" :key="item.BillNumberId">
            <template #headerLeft>
                <view class="left">
                    <view class="point"></view>
                    <view class="name">{{ item.BillName }}</view>
                </view>
            </template>
            <template #headerRight>
                <view class="price-wrapper">
                    本期实收：<text>￥{{ item.HjTotal }}</text>
                </view>
            </template>
            <template #content>
                <view class="item">
                    <view class="left">收款单号</view>
                    <view class="rigth">{{ item.BillCode }}</view>
                </view>
                <view class="item">
                    <view class="left">创建时间</view>
                    <view class="rigth">{{ item.BillDate }}</view>
                </view>
                <view class="item">
                    <view class="left">数量</view>
                    <view class="rigth">{{ item.TotalQty }}</view>
                </view>
                <view class="item">
                    <view class="left">期末应收</view>
                    <view class="rigth price">￥{{ item.WjsTotal }}</view>
                </view>
            </template>
        </item-card>
    </view>
</template>

<script>
import itemCard from "@/pages_erp/components/item-card.vue"
import { mapState } from "vuex"

export default {
    components: {
        itemCard,
    },
    computed: {
        ...mapState("report", ["customDetailList"]),
    },
	methods:{
		goProduct(item){
			if(item.IsLower==1){
				this.easyGoTo('/pages_erp/new-sale/product-inventory?code='+item.OrderNo)
			}
		}
	},
}
</script>

<style lang="scss">
.custom-detail-list {
    margin: 0 32rpx 24rpx;

    .left {
        display: flex;
        align-items: center;

        .point {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background-color: $app-color-main;
        }

        .name {
            margin-left: 12rpx;
            font-weight: 700;
        }
    }

    .price-wrapper {
        display: flex;
        align-items: center;

        text {
            font-size: 32rpx;
            font-weight: 700;
            color: $app-color-main;
        }
    }

    .item {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
            color: $app-color-main;
            font-weight: 700;
        }
    }
}
</style>
